<template>
  <el-dialog
    append-to-body
    :title="info"
    :visible.sync="dialogVisible"
    align="left"
    :close-on-click-modal="false"
    v-loading="currLoading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    :width="width+'px'"
    top="30px">
    <div v-if="dialogVisible && detail.order.id>0" style="height: 750px;">
      <div id="order-dialog">

        <div class="nav-buttons">
          <div class="button" v-for="(item,index) in showTypeArr" :key="index" v-text="item.name"
               :class="{curr:showType===item.key}" @click="changeShowType(item.key)"></div>
          <div class="c"></div>
        </div>
        <div class="content" style="height: 700px; overflow: hidden; width: 100%;">

          <!--基本信息-->
          <div v-if="showType==='baseInfo'">
            <div class="custom-table custom-table-2" style="margin-top: 20px">
              <div class="row">
                <div class="left">订单编号:</div>
                <div class="right" v-text="detail.order.orderNo"></div>
                <div class="c"></div>
              </div>
              <div class="row">
                <div class="left">下单时间:</div>
                <div class="right" v-text="detail.order.createdAt"></div>
                <div class="c"></div>
              </div>

              <div class="row">
                <div class="left">物流方式:</div>
                <div class="right">
                  <span v-text="detail.order.sendType.name"></span>
                </div>
                <div class="c"></div>
              </div>
              <div class="row">
                <div class="left">支付方式:</div>
                <div class="right">
                  <span v-if="detail.order.payType" v-text="detail.order.payType.name"></span>
                  <span v-if="!detail.order.payType">未支付</span>
                </div>
                <div class="c"></div>
              </div>

              <div class="row" v-if="detail.order.applyStatus">
                <div class="left">退换货状态:</div>
                <div class="right" v-text="detail.order.applyStatus.name"></div>
                <div class="c"></div>
              </div>
              <div class="row" v-if="detail.order.applyType">
                <div class="left">退换货类型:</div>
                <div class="right" v-text="detail.order.applyType.name"></div>
                <div class="c"></div>
              </div>

              <div class="row">
                <div class="left">订单总价:</div>
                <div class="right">
                  <span class="price-font" v-text="'￥'+ToMoney(detail.order.price)"></span>
                </div>
                <div class="c"></div>
              </div>
              <div class="row">
                <div class="left">支付时间:</div>
                <div class="right" v-text="detail.order.payTime"></div>
                <div class="c"></div>
              </div>

              <div class="row">
                <div class="left">订单状态:</div>
                <div class="right" v-text="detail.order.status.name"></div>
                <div class="c"></div>
              </div>
              <div class="row">
                <div class="left">备注信息:</div>
                <div class="right" v-text="detail.order.info?detail.order.info:'-'"></div>
                <div class="c"></div>
              </div>

              <div class="c"></div>
            </div>

            <div style="margin-top: 10px;">
              <product-item :curr-product="{
              id:product.productId,
              price:product.productPrice,
              model:product.productModel,
              nums:product.productNums,
              name:product.productName,
              image:product.productImage,
            }" v-for="(product,index) in detail.orderProductList" :key="index"/>
              <div class="price-box">
                <div class="total-line" style="margin-top: 10px;">
                  商品总价: <span class="price-font" v-text="ToMoney(detail.order.productPrice)"></span>
                </div>
                <div class="total-line" v-if="detail.order.expressPrice>0">
                  配送费: <span class="price-font" v-text="'+'+ToMoney(detail.order.expressPrice)"></span>
                </div>
                <div class="total-line" v-if="detail.order.fullMinusPrice>0">
                  店铺满减: <span class="price-font" v-text="'-'+ToMoney(detail.order.fullMinusPrice)"></span>
                </div>
                <div class="total-line" v-if="detail.couponPrice>0">
                  优惠券: <span class="price-font" v-text="'-'+ToMoney(detail.order.couponPrice)"></span>
                </div>
                <div class="total-line" v-if="detail.order.supplierDiscountPrice>0">
                  店铺其他折扣: <span class="price-font"
                                      v-text="'-'+ToMoney(detail.order.supplierDiscountPrice)"></span>
                </div>
                <div class="total-line" v-if="detail.order.price>0">
                  实际费用: <span class="price-font" v-text="'￥'+ToMoney(detail.order.price)"></span>
                </div>
              </div>
            </div>
          </div>

          <!--物流信息-->
          <div id="express-info" v-if="showType==='expressInfo'">
            <order-express-box  :call-reload-detail="reloadExpress" :all-express-list="detail.allExpressList" v-if="detail.orderExpress.id>0"
                               :detail="detail.orderExpress"/>
          </div>

          <!--收货人-->
          <div class="custom-table" id="address-info" v-if="showType==='addressInfo'" style="margin-top: 20px">
            <div class="row">
              <div class="left">收货人:</div>
              <div class="right" v-text="detail.orderAddress.name"></div>
              <div class="c"></div>
            </div>
            <div class="row">
              <div class="left">收货电话:</div>
              <div class="right" v-text="detail.orderAddress.mobile"></div>
              <div class="c"></div>
            </div>
            <div class="row">
              <div class="left">收货地址:</div>
              <div class="right" v-text="detail.orderAddress.addressDetail"></div>
              <div class="c"></div>
            </div>
            <div class="c"></div>
          </div>
          <!--退换货-->
          <div id="apply-info" v-if="showType==='applyInfo' && detail.orderApply.id>0">
            <order-apply-detail-box v-if="detail.orderApply.id>0" :detail="detail.orderApply"/>
          </div>
          <!--发票信息-->
          <div id="invoice-info" v-if="showType==='invoiceInfo' && detail.order.invoiceFileUrl.length>0">
            <my-pdf v-if="!isClosePdf && detail.order.invoiceFileUrl  && detail.order.invoiceFileUrl.length>0"
                    style="width: 800px;height: 400px;" :pdf-url="detail.order.invoiceFileUrl"/>
          </div>


        </div>
        <div class="button-arr" v-if="detail.order.id>0" align="center">
          <my-button type="danger" v-if="detail.order.status.id===0" :click="function (){cancel()}"
                     access-action="SupplierOrder/manage" text="取消订单"></my-button>
          <my-button type="primary" v-if="detail.order.status.id===0 && !detail.order.payType"
                     :click="function (){pay()}" text="支付订单" access-action="SupplierOrder/pay"></my-button>
          <time-out-box v-if="detail.order.status.id===0 && !detail.order.payTime && detail.order.timeOutInfo>0" :callback="reloadDetail" :diff-sconds="detail.order.timeOutInfo"/>
          <my-button type="primary" v-if="[1,2].indexOf(detail.order.status.id)>-1"
                     :click="function (){confirmReceived()}"
                     access-action="SupplierOrder/manage"
                     :text="detail.order.sendType.id===2?'确认自提':'确认收货'"></my-button>
          <my-button type="primary"
                     v-if="detail.order.isEnableSubmit"
                     access-action="SupplierOrderApply/manage"
                     :click="function (){submitApply()}" text="申请售后">
          </my-button>
          <my-button type="success"
                     v-if="detail.order.status.id===3 && detail.order.isConfirmAddStock.id===0"
                     access-action="SupplierOrderApply/manage"
                     :click="function (){confirmAddStock()}" text="确认增加库存">
          </my-button>
          <my-button type="primary"
                     v-if="detail.order.status.id===3 && (detail.order.applyId && detail.order.applyId>0)"
                     access-action="SupplierOrderApply/manage"
                     :click="function (){showApply()}" text="查看售后">
          </my-button>
        </div>
        <!--        <express-item-list :express-list="detail.content"/>-->
      </div>
    </div>
    <submit-supplier-order-apply-dialog v-if="dialogVisible" ref="submitSupplierOrderApplyDialog" :success-function="reloadDetail"/>
    <supplier-order-apply-dialog v-if="dialogVisible" ref="supplierOrderApplyDialog" :success-function="reloadDetail"/>
    <supplier-order-pay-dialog v-if="dialogVisible" ref="supplierOrderPayDialog" :success-function="reloadDetail"/>
  </el-dialog>
</template>

<script>
import MemberItem from '../Common/MemberItem'
import ProductItem from '../Common/ProductItem'
import ExpressItemList from '../Common/ExpressItemList'
import OrderExpressBox from '../Common/OrderExpressBox'
import OrderApplyDetailBox from '../Common/OrderApplyDetailBox'
import MyPdf from '../Common/MyPdf'
import OrderSubmitExpressDialog from './OrderSubmitExpressDialog'
import SubmitSupplierOrderApplyDialog from './SubmitSupplierOrderApplyDialog'
import SupplierOrderPayDialog from './SupplierOrderPayDialog'
import SupplierOrderApplyDialog from './SupplierOrderApplyDialog'
import MyButton from '../Common/MyButton'
import TimeOutBox from "../Common/TimeOutBox";

export default {
  name: 'SupplierOrderDialog',
  props: {
    successFunction: Function
  },
  components: {
    TimeOutBox,
    MyButton,
    SupplierOrderApplyDialog,
    SupplierOrderPayDialog,
    SubmitSupplierOrderApplyDialog,
    MyPdf, OrderApplyDetailBox, OrderExpressBox, ExpressItemList, ProductItem, MemberItem
  },
  data: function () {
    return {
      info: '供货订单详情',
      width: 1250,
      showTypeArr: [],
      isClosePdf: false,
      showType: 'baseInfo',
      dialogVisible: false,
      currLoading: false,
      detail: {
        'orderAddress': {
          'id': 2,
          'orderId': 2,
          'name': '林先生',
          'mobile': '13866494493',
          'province': '陕西省',
          'city': '西安市',
          'county': '长安区',
          'address': '郭杜街道终南大道',
          'addressDetail': '陕西省,西安市,长安区 郭杜街道终南大道',
          'location': '108.904256,34.124371'
        },
        'orderExpress': {
          'expressNumber': ' JT3010553370757',
          'expressCompany': '极兔速递',
          'content': [
            {
              'createdAt': '2022-09-16 11:55:31',
              'tagName': '揽收中',
              'content': '商品已经下单'
            }
          ]
        },
        'allExpressList': {
          '0': [
            {
              'expressNumber': ' JT3010553370757',
              'expressCompany': '极兔速递',
              'type': 0
            }
          ]
        },
        'orderProductList': [],
        'orderApply': [],
        'order': {
          'id': 0,
          'orderNo': '202209161153062245',
          'status': {
            'name': '已收货',
            'id': 3
          },
          'shopId': 7,
          'shopLogo': 'http://image.yangfankj.com/shop/logo/7.jpg',
          'shopName': '',
          'memberId': 18,
          'memberUsername': '15200000018',
          'memberIcon': 'http://image.yangfankj.com/icon/17.png',
          'memberNickname': '',
          'productData': [],
          'productPrice': 100,
          'expressPrice': 20,
          'couponPrice': 0,
          'fullMinusPrice': 0,
          'shopDiscountPrice': 0,
          'price': 120,
          'sendType': {
            'name': '快递物流',
            'id': 0
          },
          'sendTime': null,
          'takeNumber': null,
          'payType': {
            'name': '账户余额-支付',
            'id': 0
          },
          'payTime': '2022-09-16 11:53:06',
          'couponId': 0,
          'cancelReason': null,
          'createdAt': '2022-09-16 11:53:06',
          'orderGroupId': null,
          'orderGroupStatus': null,
          'applyType': null,
          'applyStatus': null,
          'applyId': 0,
          'orderGroupEndTime': null,
          'info': '',
          'addressName': null,
          'addressMobile': null,
          'addressDetail': null,
          'isInvoice': {
            'name': '不需要',
            'id': 0
          },
          invoiceFileUrl: ''
        }
      }
    }
  },
  watch: {
    dialogVisible: function () {
      if (!this.dialogVisible) {
        this.detail = {
          id: 0
        }
        this.showType = 'baseInfo'
      }
    }
  },
  mounted () {
  },
  methods: {
    reloadExpress: function (id) {
      // Order/getExpressDetail
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'SupplierOrder/getExpressDetail', {
        id: id
      }, function (data) {
        $this.detail.orderExpress = data.orderExpress
        $this.$forceUpdate()
        // console.log('data')
        // $this.reloadDetail()
        // $this.$message.success('操作成功')
      })
    },
    submitApply: function () {
      this.$refs.submitSupplierOrderApplyDialog.open({
        order: this.detail.order,
        orderProductList: this.detail.orderProductList,
      })
    },
    confirmAddStock: function () {
      let $this = this
      $this.$confirm('您是否确认进行该操作, 是否继续?', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        $this.MyRequest(this.ApiDoNameShop + 'SupplierOrder/confirmAddStock', {
          id: $this.detail.order.id,
        }, function (data) {
          $this.$message.success('操作成功')
          $this.$router.push('/ProductStockLogPage')
          $this.dialogVisible = false
          $this.$forceUpdate()
        })
      }).catch(() => {
      })
    },
    showApply: function () {
      this.$refs.supplierOrderApplyDialog.open(this.detail.order.applyId)
    },
    // 重新加载订单详情
    reloadDetail: function () {
      let $this = this
      var orderId = $this.detail.order.id
      $this.dialogVisible = false
      $this.$forceUpdate()
      setTimeout(function () {
        $this.getDetail(orderId)
      }, 500)
    },
    // 获取订单详情
    getDetail: function (id) {
      let $this = this
      $this.MyRequest(this.ApiDoNameShop + 'SupplierOrder/getDetail', {id}, function (data) {
        $this.detail = data
        $this.initShowType()
        $this.dialogVisible = true
        $this.$forceUpdate()
      })
    },
    // 初始化显示类别
    initShowType: function () {
      this.showTypeArr = [
        {name: '基本信息', key: 'baseInfo'},
      ]
      if (this.detail.order.sendType.id !== 2) {
        this.showTypeArr.push({name: '收货人', key: 'addressInfo'})
      }
      if (this.detail.orderApply && this.detail.orderApply.id > 0) {
        this.showTypeArr.push({name: '退换货信息', key: 'applyInfo'})
      }
      if (this.detail.order.invoiceFileUrl && this.detail.order.invoiceFileUrl.length > 0) {
        this.showTypeArr.push({name: '发票信息', key: 'invoiceInfo'})
      }
      if (this.detail.orderExpress && this.detail.orderExpress.expressCompany) {
        this.showTypeArr.push({name: '物流信息', key: 'expressInfo'})
      }
    },
    // 切换展示信息
    changeShowType: function (showType) {
      this.showType = showType
    },
    // 打开详情弹窗
    open: function (id) {
      this.getDetail(id)
    },
    // 确认收货
    confirmReceived: function () {
      let $this = this
      $this.$confirm('您是否确认进行该操作, 是否继续?', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        $this.MyRequest(this.ApiDoNameShop + 'SupplierOrder/received', {
          id: this.detail.order.id,
        }, function (data) {
          $this.$message.success('操作成功')
          $this.reloadDetail()
        })
      }).catch(() => {
      })
    },
    // 取消订单
    cancel: function () {
      let $this = this
      $this.$prompt('请输入 取消原因(长度范围3,20个字符)', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[\w\W]{3,20}$/,
        inputErrorMessage: '取消原因 格式不正确'
      }).then(({value}) => {
        $this.MyRequest(this.ApiDoNameShop + 'SupplierOrder/cancel', {
          id: this.detail.order.id,
          reason: value,
        }, function (data) {
          $this.$message.success('操作成功')
          $this.getDetail()
        })
      }).catch(() => {
      })
    },
    // 支付订单
    pay: function () {
      this.$refs.supplierOrderPayDialog.open(this.detail.order)
    }
  }
}
</script>

<style scoped>
.total-line {
  text-align: right;
  padding-right: 5px;
  width: 100%;
  line-height: 25px;
}
</style>
